<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
</head>

<style>
    .pagination-container {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .pagination-container .pagination {
        display: inline-block;
        padding-left: 0;
        margin: 0;
        border-radius: 4px;
    }

    .pagination-container .pagination-list {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .pagination-container .pagination-list li {
        display: inline-block;
    }

    .pagination-container .pagination-list li a {
        color: #337ab7;
        padding: 6px 12px;
        margin: 0 3px;
        text-decoration: none;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .pagination-container .pagination-list li a:hover {
        background-color: #337ab7;
        color: #fff;
    }

    .pagination-container .pagination-list .active a {
        background-color: #337ab7;
        color: #fff;
    }
    /*.layui-nav-item.layui-this > a {*/
    /*    background-color: white;*/
    /*    color: black !important;*/
    /*    font-size: 16px !important;*/
    /*}*/
    .title {
        font-size: 24px;
        color: #333;
        text-align: center;
        margin-bottom: 20px;
    }
     .welcome-text{
      color:aquamarine;
         margin: 10px 10px 5px  10px;
     }
    .layui-table {
        margin: 0 auto;
        width: 80%;
        border-collapse: collapse;
    }

    .layui-table th,
    .layui-table td {
        padding: 10px;
        text-align: center;
        border: 1px solid #ddd;
    }

    .layui-table th {
        background-color: #f2f2f2;
        color: #333;
    }
    .layui-side {
        width: 200px;
    }

    .layui-side-scroll {
        height: calc(100% - 60px);
        overflow: auto;
    }

    .layui-nav-item {
        line-height: 50px;
    }

    .layui-body {
        padding: 20px;
    }

    .headpic{
        height: 100px;
        width: 100px;
        margin:0 50px;
    }

</style>


<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">职工后台管理系统</div>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <div class="logo-wrapper">
                <div class="logo-img">
                    <img class="headpic" th:src="@{${session.user.pictRoad}}">
                </div>
                <div class="welcome-text" >
                    <p th:text="'欢迎您,尊贵的'+${session.user.username}+'！'"></p>
                </div>
            </div>
            <!-- 左侧导航区域 -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="#">员工信息</a>
                            <dl class="layui-nav-child">
                                <dd><a id="nav-salary" th:href="@{/index}">员工薪酬信息</a></dd>
                                <dd><a id="nav-department" th:href="@{/user_show}">员工部门信息</a></dd>

                            </dl>
                </li>
                <li class="layui-nav-item">
                    <a id="nav-visualization" th:href="@{/showTable}">可视化展示</a>
                </li>
                <li class="layui-nav-item">
                    <a href="login.html">退出</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <H2 class="title">员工薪酬信息展示</H2>

        <table class="layui-table">
            <colgroup>
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="100">
                <col width="100">
            </colgroup>
            <thead>
            <tr>
                <th>员工编号</th>
                <th>员工姓名</th>
                <th>工作</th>
                <th>直属领导</th>
                <th>入职时间</th>
                <th>薪资</th>
                <th>津贴</th>
                <th>部门编号</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="emp:${session.pageInfo.list}">
                <td th:text="${emp.empno}"></td>
                <td th:text="${emp.ename}"></td>
                <td th:text="${emp.job}"></td>
                <td th:text="${emp.mgr}"></td>
                <td th:text="${emp.hiredata}"></td>
                <td th:text="${emp.sal}"></td>
                <td th:text="${emp.comm}"></td>
                <td th:text="${emp.deptno}"></td>
            </tr>
            </tbody>
        </table>
        <div class="pagination-container"> <!-- 自定义样式容器 -->
            <div class="pagination">
                <ul class="pagination-list">
                    <li><a href="#" th:href="@{/index(pageNum=${session.pageInfo.hasPreviousPage} ? ${session.pageInfo.prePage} : 1)}" th:unless="${session.pageInfo.isFirstPage}">&laquo; 上一页</a></li>
                    <li th:each="pageNum : ${session.pageInfo.navigatepageNums}">
                        <a th:href="@{/index(pageNum=${pageNum})}"
                           th:text="${pageNum}"
                           th:class="${pageNum == session.pageInfo.pageNum ? 'active' : ''}">
                        </a>
                    </li>

                    <li><a href="#" th:href="@{/index(pageNum=${session.pageInfo.hasNextPage} ? ${session.pageInfo.nextPage} : ${session.pageInfo.pages})}" th:unless="${session.pageInfo.isLastPage}">下一页 &raquo;</a></li>
                </ul>
            </div>
        </div>

</div>
</div>
</body>
<script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
       var $=layui.$;
        // 获取当前页面的 URL
        var currentUrl = window.location.href;
        console.log(currentUrl);
        // 根据当前 URL 判断并设置高亮
        if (currentUrl.includes('/index')) {
            $('#nav-salary').addClass('layui-this');
        } else if (currentUrl.includes('/user_show')) {
            $('#nav-department').addClass('layui-this');
        } else if (currentUrl.includes('/showTable')) {
            $('#nav-visualization').addClass('layui-this');
        }

        element.render('nav', 'test');
    });
</script>


</html>